import React, { useState } from 'react'
import './Design.scss'
import { Carousel } from 'antd';
import DesignTab from '../../components/DesignCon/DesignTab'
import DesignConJX from '../../components/DesignCon/DesignConJX/index'
import DesignCreateSJ from '../../components/DesignCon/DesignCreateSJ/index'
import Searchaa from '../../components/Searchaa/index'
import ImgBeLazy from '../../components/imgBeLazy/index'
// 模拟搜索数据
const items = [
  { id: 1, name: '中秋节' },
  { id: 2, name: '国庆节' },
  { id: 3, name: '想回家' },
  { id: 4, name: '买到票咯' },
  { id: 5, name: '助力成功' },
  { id: 6, name: '回家实现' },
  { id: 7, name: '吃妈妈做的饭' },
  { id: 8, name: '中秋' },
  { id: 9, name: '简历' },
  { id: 10, name: '回家实现' },
  { id: 11, name: '听妈妈的话' },
]
// 轮播图样式
const contentStyle: React.CSSProperties = {
  margin: 0,
  height: '170px',
  color: '#fff',
  lineHeight: '170px',
  textAlign: 'center',
  background: '#364d79',
};
const Index: React.FC = () => {
  const searchOptionhhhh = {
    title: '为你推荐',
    values: ['国庆', '秋分', '喜报', '手机海报', '小红书', '免费', '邀请函', '招聘', '早安', '商品主图', '教育培训', '公众号首图', '简历', '直播背景', '全屏海报', 'PPT', '图文带货', '出海电商', '倒计时', '横版海报', '主图图标', 'LOGO', '科技风', '抖音', '',
      '名片', '直播忒片', '奖状', '菜单', '美业', '公众号次图', '视频边框', '翻页H5', '长页H5', '价目表', '知识科普', '活动宣传', '地产家居', '社交生活', '印刷'
    ]
  }
  const arr = [
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/05/c5ce465e-630b-4182-a940-34d213d039ca_thumb?v=1721142300000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/08/b9fc4dfa-d4cd-4c85-bc54-ffa0a219ed52_thumb?v=1720407240000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/04/29/c791fe18-8333-4bcb-8ff7-38c0184fc4a2_thumb?v=1726286400000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/e80da115-156b-4caa-a41c-5ccd79b9c4dd_thumb?v=1724922361000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/e6f1a919-fc11-4c5c-a2b1-1d70f56dad16_thumb?v=1724922721000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/f9e2a416-c290-45bc-85b9-9202af9a4152_thumb?v=1724922000000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/06/4b1e7515-4fe6-493f-ae8c-da9837e3989c_thumb?v=1725609840000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/714e2a68-e1d5-4848-9a3d-767f7d4cd777_thumb?v=1724980200000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/05/ff94398c-0ce1-4af7-b23a-bb5d1d460921_thumb?v=1725501361000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/03/e683245e-009d-4381-836d-303387e0fbf0_thumb?v=1725330840000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/04/bff25076-3e1e-426e-b230-9da8675fa8bc_thumb?v=1725444901000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/3b36a611-5370-4004-95a5-bc5470080a79_thumb?v=1721986680000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2023/07/03/c6bb40ea-4177-4970-95e0-133e5a8f8989_thumb?v=1722931800000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/28/4f873c3d-924c-455d-b4a2-9318fa4d692f_thumb?v=1719563281000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/23/5a6f0ac1-72ce-4af6-8270-ddcc02e357c6_thumb?v=1724399521000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/fe98661c-4b30-4604-87c6-5062026d5e01_thumb?v=1724921281000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/08495350-c013-47f1-84f8-3b46d56fe72d_thumb?v=1721985960000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/11f00800-e0fb-4fbd-a667-11c5c9f686cc_thumb?v=1724987521000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/634086cd-230a-40ff-bd10-c40be0083cc6_thumb?v=1724987160000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/a246c966-4db5-4e63-89ca-3a65244b3f20_thumb?v=1721961002000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/31/3d90440c-3bbf-4437-af0c-387db37d8442_thumb?v=1722561301000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/23/6b3099f5-e3ba-47a5-8c30-46bb816f5160_thumb?v=1721702700000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/15/ed8e506d-f6d1-41fd-8ef4-66012d7f3b0c_thumb?v=1721142000000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/25/93036790-9603-4d22-9904-d6d8de8c431c_thumb?v=1719278100000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70']
  return (
    <div className='DesignBox'>
      <div className="DesignTop">
        {/* 轮播图 */}
        <Carousel arrows infinite={false} >
          <div>
            <h3 style={contentStyle}><img src="https://pub-cdn-oss.chuangkit.com/ad_position/e4866cc9b328491e974dec33ae5df530?imageMogr2%2Fformat%2Fwebp/cgif/35" alt="" className='Designimg' /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img src="https://pub-cdn-oss.chuangkit.com/ad_position/b774078df9344a8992983198d4550061?imageMogr2%2Fformat%2Fwebp/cgif/35" alt="" className='Designimg' /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img src="https://pub-cdn-oss.chuangkit.com/ad_position/080fbb4af88a45a598f15c43fc299483?imageMogr2%2Fformat%2Fwebp/cgif/35" alt="" className='Designimg' /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img src="https://pub-cdn-oss.chuangkit.com/ad_position/ca84e14f8fc246b2b5c0c9fd72a9b7ca?imageMogr2%2Fformat%2Fwebp/cgif/35" alt="" className='Designimg' /></h3>
          </div>
        </Carousel>
        <DesignTab items={items} id={0}></DesignTab>
      </div>
      <div className="DesignCon"><DesignConJX></DesignConJX></div>
      <div className="Designbott"><DesignCreateSJ></DesignCreateSJ></div>
      <div className="Designav">
        <Searchaa optiona={searchOptionhhhh}></Searchaa>
      </div>
      <div className="DesignList">
        {
          arr.map((item, index) => (
            <ImgBeLazy text={item}></ImgBeLazy>
          ))
        }

      </div>
    </div>
  )
}

export default Index